import React, { useRef, useState, useImperativeHandle } from 'react'


const Cell = React.forwardRef((props, ref) => {

    const [first, setfirst] = useState(100)

    // useImperativeHandle 该 hooks 可以让我们在函数组件中使用 ref 的时候
    // 自定义暴露给外部的内容，可以是一个状态，也可以是一个函数。
    useImperativeHandle(
        ref,
        () => {
            // return 出去的内容，就是我们要自定义暴露出去的内容
            return {
                first,
                add() {
                    setfirst(first + 1)
                },
                age: 11,
                name: '张三'
            }
        }
    )

    return <>
        <h1>Cell - {first} </h1>
    </>
})

export default function App() {

    const cellRef = useRef(null)

    return (
        <div>
            <h1>
                App
                <button onClick={() => {
                    console.log(cellRef);

                    // 触发子组件的修改函数
                    cellRef.current.add()

                }}>点击获取 cell 组件</button>
            </h1>
            <hr />
            <Cell ref={cellRef} />
        </div>
    )
}
